import React from 'react'
import './index.css'
import { nanoid } from 'nanoid'


//表单输出逻辑
//
export default function Header({ setTodoList, todoList }) {
  //发布事件函数
  const publishHandle = (e) => {
    //获取表单的数据,数据去除空格
    const publishValue = e.target.value.trim()
    //如果表单数据为空,直接弹出数据不能为空,如果有值,把这个值添加到state上
    if (e.keyCode !== 13) return
    if (!publishValue)  return alert('输入的数据不能为空') 
    //设置的对象在外面用变量接收,setTodoList里面只用添加变量
    const newTodo = { id: nanoid(), todo: publishValue, done: false }
    //外面要加[],不然就把state修改成刚刚添加的对象了
    setTodoList([newTodo, ...todoList])
    //清空输入框
    e.target.value=''
  }

  return (
    <div className="todo-header">
      {/* 绑定事件键盘抬起时触发函数 */}
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
